* {
  margin: 0;
  padding: 0;
}
* a {
  text-decoration: none;
  color: #fff;
}
body {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: relative;
}
.menu {
  position: absolute;
  z-index: 99;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.3);
}
.menu .w {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 65%;
}
.menu .w .log a {
  width: 159px;
  height: 46px;
}
.menu .w ul {
  width: 360px;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
.menu .w ul:nth-child(2) {
  width: 260px;
}
.menu .w ul:nth-child(2) li a {
  font-size: 20px;
  color: #31c27c;
}
.menu .w ul:nth-child(2) li:nth-child(2) a {
  color: #fff;
}
.menu .w ul:nth-child(3) li {
  margin-right: 20px;
}
.menu .w ul:nth-child(3) li a {
  font-size: 20px;
}
.mod_banner {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 650px;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/banner_pc.jpg?max_age=2592000&v=180d42ed7af7320f0f71b0d4bd1648b3") 50% no-repeat;
  background-size: cover;
  padding-top: 130px;
}
.mod_banner ul li {
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -205px;
}
.mod_banner ul li .title {
  margin-bottom: 60px;
  width: 623px;
  height: 145px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: 0 0;
}
.mod_banner ul li a {
  display: block;
  width: 293px;
  height: 69px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -416px -859px;
}
.mod_banner ul li:nth-child(1) {
  transform: translate(-50%, 0);
}
.mod_banner ul li:nth-child(1) .title {
  width: 587px;
  height: 145px;
  background-position: 0 -312px;
}
.mod_banner ul li:nth-child(1) a {
  margin: 0 auto;
  display: block;
  width: 293px;
  height: 69px;
  background-position: -416px -859px;
}
.mod_banner .nav {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 190px;
  border-top: 1px solid rgba(255, 255, 255, 0.123);
}
.mod_banner .nav div {
  width: 110px;
  height: 170px;
  margin-right: 200px;
  opacity: 0.5;
}
.mod_banner .nav div:nth-child(1) {
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -366px -940px;
}
.mod_banner .nav div:hover {
  opacity: 1;
}
.mod_banner .nav div:nth-child(2) {
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -244px -940px;
}
.mod_banner .nav div:nth-child(3) {
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -122px -940px;
}
.mod_banner .nav div:nth-child(4) {
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: 0 -940px;
  margin-right: 0;
}
.active {
  border-top: 2px solid #fff;
  opacity: 1 !important;
}
.active1 {
  display: block !important;
}
.mod_banner2 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: 880px;
  justify-content: space-between;
  width: 100%;
}
.mod_banner2 h2 {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  margin-left: -283px;
  margin-top: -100px;
  width: 566px;
  height: 74px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -556px -630px;
}
.mod_banner2 p {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  margin-top: 0;
  margin-left: -202px;
  width: 404px;
  height: 69px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: 0 -859px;
}
.mod_banner3 {
  position: relative;
  height: 900px;
  width: 100%;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/bg_lyric.jpg?max_age=2592000&v=5464800f108995331d80b69b1347f97e") 50% no-repeat;
  background-size: cover;
}
.mod_banner3 h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -504px;
  margin-top: -130px;
  width: 554px;
  height: 149px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: 0 -469px;
  z-index: 99;
}
.mod_banner3 p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -504px;
  margin-top: 50px;
  width: 468px;
  height: 69px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -636px -493px;
  z-index: 99;
}
.mod_banner3 .shouji1 {
  position: absolute;
  top: 138px;
  right: 232px;
  width: 350px;
  height: 604px;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/lyric_phone1.jpg?max_age=2592000&v=0920aa83769198cd32861e91ff91b419");
  transform: rotate(7.5deg);
  z-index: 99;
}
.mod_banner3 .shouji2 {
  position: absolute;
  top: 0;
  right: 100px;
  width: 580px;
  height: 892px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/lyric_phonebox.png?max_age=2592000&v=fb521d645a37e6de17484aee4e64561b");
  z-index: 99;
}
.mod_banner4 {
  position: relative;
  height: 900px;
  width: 100%;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/bg_like.jpg?max_age=2592000&v=9c49432b5307f2ef106755e1fb2ec2f0") 50% no-repeat;
  background-size: cover;
}
.mod_banner4 h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -113px;
  width: 615px;
  height: 143px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: 0 -157px;
  z-index: 99;
}
.mod_banner4 p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: 68px;
  width: 550px;
  height: 69px;
  background-position: 0 -778px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  z-index: 99;
}
.mod_banner4 .shouji1 {
  position: absolute;
  top: 176px;
  left: 253px;
  width: 374px;
  height: 500px;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/like_phone.jpg?max_age=2592000&v=8227cf61e88e1baf74175ebec7b44ce2") 50% no-repeat;
  transform: rotate(-5.5deg);
  z-index: 99;
}
.mod_banner4 .shouji2 {
  position: absolute;
  top: 0;
  left: 220px;
  width: 450px;
  height: 778px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/like_phonebox.png?max_age=2592000&v=2a0441b5333d125826ef52995f5debea");
  z-index: 99;
}
.mod_banner5 {
  position: relative;
  height: 900px;
  width: 100%;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/bg_synchro.jpg?max_age=2592000&v=03957a8ab35fe6539846468d732d17ec") 50% no-repeat;
  background-size: cover;
}
.mod_banner5 h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -580px;
  margin-top: -270px;
  width: 544px;
  height: 136px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: 0 -630px;
  z-index: 2;
}
.mod_banner5 p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -580px;
  margin-top: -108px;
  width: 454px;
  height: 63px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -562px -778px;
  z-index: 2;
}
.mod_banner5 .diannao {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -392px;
}
.mod_banner5 .diannao .diannao1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 784px;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/synchro_mac1.png?max_age=2592000&v=6c3adb96fb72e2db6d300ae3751a37ea") 0 0 no-repeat;
  z-index: 2;
}
.mod_banner5 .diannao .diannao2 {
  position: absolute;
  top: 407px;
  left: 0px;
  width: 620px;
  height: 376px;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/synchro_mac2.png?max_age=2592000&v=4410fc339fa0c0b88ee700ee1978a1c2") 0 0 no-repeat;
}
.foot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
}
.foot p {
  text-align: center;
  font-size: 12px;
  line-height: 25px;
  color: #fff;
}
@keyframes div1 {
  0% {
    opacity: 0;
    transform: scale(1.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.xiangxiajiantou {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 20px;
  background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
  background-position: -1091px -161px;
  animation: iconArrow 1.5s infinite both 2s;
  z-index: 99;
}
@keyframes iconArrow {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}
.liuxing {
  position: absolute;
  top: -150px;
  right: 110px;
  width: 108px;
  height: 152px;
  background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/star.png?max_age=2592000&v=914999ca83eaf3206e7364e9e2180b91") 0 0 no-repeat;
  background-size: cover;
  z-index: 999;
  animation: liuxing 2s linear;
}
@keyframes liuxing {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-700px, 1050px);
  }
}
